<template>
  <div class="home">
    <div class="homeLeft f1" v-if="articleType == 0">
      <div class="list1">
        <div
          class="list2"
          v-for="(item, index) in articleCateList"
          :key="index"
          :style="{
            background: `url(${item.cover_img})`,
            marginRight: `${index % 3 == 2 ? '0' : '5%'}`,
          }"
          @click="detailCate(item)"
        >
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="homeLeft2 f1" v-if="articleType == 1">
      <div @click="goHome" class="top">
        <i class="el-icon-s-home">&nbsp;&nbsp;返回分类页</i>
      </div>
      <ul>
        <li
          v-for="(item, index) in articleList"
          :key="index"
          :style="{
            borderBottom: `${index != 0 ? '' : '1px dashed #e1e1e1'}`,
          }"
          @click="detailPage(item)"
        >
          <p class="name" :title="item.name">{{ item.name }}</p>
          <p class="date">{{ item.pub_date }}</p>
        </li>
      </ul>
      <div class="block">
        <!-- <el-pagination layout="prev, pager, next" :total="50"> </el-pagination> -->
      </div>
      
    </div>
    <div class="homeLeft3 f1" v-if="articleType == 2">
        <Article :articleData="articleData" @goHome="goHome" />
      </div>
    <div>
      <HomeRigth />
    </div>
  </div>
</template>

<script>
import Api from "../../../api/api";
import request from "../../../api/request";
import qs from "qs";
import { formatDate } from "@/common/publicmethods/publicmethods";
import Article from "@common/front/article";
import HomeRigth from "@common/front/homeRight";
export default {
  components: {
    Article,
    HomeRigth,
  },
  data() {
    return {
      articleList: null, //文章列表
      articleData: {name:'返回文章列表',data:null}, //单击所选文章的对象
      articleType: 0, //文章页是否跳转
      articleCateList: null, //文章分类列表
      articleCateData: null, //单击所选文章分类的对象
    };
  },
  mounted() {
    this.getArticleCateData();
  },
  methods: {
    //获取文章分类
    getArticleCateData() {
      let params = {
        method: "GET",
        url: Api.apiArticleCate,
      };
      request(params)
        .then((result) => {
          if (result.status == 3) {
            this.$message.error("用户登录失效");
            this.$router.push({ name: "bolgHome" });
          } else if (result.status == 0) {
            this.articleCateList = result.data;
            this.articleCateList.forEach((item) => {
              item.cover_img = Api.API_HEADER + "/" + item.cover_img;
            });
          }
        })
        .catch((err) => {});
    },
    getArticleData() {
      let params = {
        method: "GET",
        url: Api.apiArticle + "/" + this.articleCateData.id,
      };
      request(params)
        .then((result) => {
          if (result.status == 3) {
            this.$message.error("用户登录失效");
            this.$router.push({ name: "bolgHome" });
          } else if (result.status == 0) {
            this.articleList = result.data;
            this.articleList.forEach((item) => {
              item.content = item.content.replaceAll(
                "<pre>",
                '<pre><div class="copy_but" title="复制"><i class="el-icon-tickets"></i></div>'
              );
              item.cover_img = Api.API_HEADER + "/" + item.cover_img;
              item.pub_date = formatDate(item.pub_date, "yyyy 年 MM 月 dd 日");
            });
          }
        })
        .catch((err) => {});
    },
    // 打开文章
    detailCate(item) {
      this.articleType = 1;
      this.articleCateData = item;
      this.getArticleData();
    },
    // 打开详情页
    detailPage(obj) {
      this.articleData.data = obj;
      this.articleType = 2;
    },
    // 退出首页
    goHome() {
      this.articleType = 0;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  margin-top: 50px;
  padding: 0 10%;
  display: flex;
      justify-content: space-evenly;
}
.homeLeft {
 width: calc(100% - 580px);
  background-color: #fff;
  padding: 20px 60px;
  .list1 {
    width: 100%;
    margin-top: 80px ;
    .list2 {
      float: left;
      margin-bottom: 30px;
      border-radius: 15px;
      width: 30%;
      height: 150px;
      background-size: 100% 100% !important;
      p {
        border-radius: 15px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
        font-size: 35px;
        font-weight: 20px;
        letter-spacing: 2px;
        font-weight: 1000;
        color: #fff;
      }
      p:hover {
        background-color: rgba(0, 0, 0, 0.7);
        cursor: pointer;
      }
    }
  }
}
.homeLeft2 {
  width: calc(100% - 580px);
  background-color: #fff;
  padding: 20px 60px;
  .top {
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
  }
  i {
    font-size: 18px;
  }
  i:hover {
    cursor: pointer;
    // text-decoration: underline;
  }
  ul {
    li {
      display: flex;
      height: 40px;
      align-items: center;
      padding: 0 5px;
      .name {
        width: calc(100% - 150px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .date {
        width: 150px;
        color: #aaa;
      }
      .name:hover {
        cursor: pointer;
        color: red;
        text-decoration:underline;
      }
    }
  }
}
.homeLeft3 {
 width: calc(100% - 580px);
  background-color: #fff;
  padding: 20px 60px;
}
.carousel {
  /* margin: 20px; */
  border: 1px solid;
}
</style>